Template:Div flex row end
Usage
[edit]{{Div flex row}} provides a simple way to create a horizontal alignment for related page elements (producing multiple rows if the screen is too narrow). A closing {{Div flex row end}} is required after the final item being aligned.
Free text content needs to be encased in div tags in order to create the rows and columns. If this is required, the |div o=y
parameter, inserting an opening div tag, may be used in conjunction with the {{Div CO}} template, inserting a closing and opening div tag:
Source
{{Div flex row |div o=y}}
Some content.
{{Div CO}}
Some more content.
{{Div CO}}
A third thing.
{{Div flex row end|div c=y}}
Result
Some content.
Some more content.
A third thing.
Examples
[edit]Three tables next to each other
{{Div flex row}}
<!--STANDARD TABLE MARKUP-->
{| class="wikitable"
|+ First table
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
{| class="wikitable"
|+ Second table
...
|-
| Example || Example || Example
|}
{{Div flex row end}}
Header text | Header text | Header text |
---|---|---|
Example | Example | Example |
Example | Example | Example |
Example | Example | Example |
Header text | Header text | Header text |
---|---|---|
Example | Example | Example |
Example | Example | Example |
Example | Example | Example |
Header text | Header text | Header text |
---|---|---|
Example | Example | Example |
Example | Example | Example |
Example | Example | Example |
A table next to a related map.
{{Div flex row|align-items=center}}
<!--STANDARD TABLE MARKUP-->
{| class="wikitable"
|+ Launch rollout timeline
! scope="col" | Launch date
! scope="col" | Country / Territory
|-
| rowspan="20" scope="row" | 13 February
| {{Flagu|Australia}}
|-
| {{Flagu|Austria}}
|-
| {{Flagu|Belgium}}
...
| {{Flagu|South Korea}}
|-
| {{Flagu|Tunisia}}
|}
<!--THE MAP AND ITS FRAME-->
{{image frame|align=none|content=
{{Highlighted world map by country
|AU=#ff1d65 |AT=#ff1d65 |BE=#ff1d65
...
|KR=#ff9800 |TN=#ff9800
|scale=75 |projection=mercator}}
|caption={{Legend|#ff1d65|13 February}} {{Legend|#ff9800|20 April}}
}}
{{Div flex row end}}
Launch date | Country / Territory |
---|---|
13 February | ![]() |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
20 April | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() | |
![]() |
![]() | Graphs are unavailable due to technical issues. There is more info on Phabricator and on MediaWiki.org. |
A template to help create horizontal groupings of related content.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Wrap | wrap | A pass-through for the CSS "flex-wrap" property.
| String | optional |
Align items | align-items | A pass-through for the CSS "align-items" property.
| String | optional |
Justify content | justify-content | A pass-through for the CSS "justify-content" property.
| String | optional |
Opening div | div o | An opening div tag for the first block of content. Some content (such as free text) requires this to create the blocks used for the columns and rows.
| Boolean | optional |
Gap | gap | The flexbox gap parameter, which specifies a minimum spacing between items; a CSS length value. Units of "em" are recommended.
| String | optional |
See also
[edit]- {{Gallery layout}} – similar template